import ProTable from '@ant-design/pro-table';
import {useRef, useState} from 'react';
import {defaultPagination, paginationTool} from '@/utils/util';
import {useMount, useRequest, useSetState} from 'ahooks';

import {editCategory, findByPageCategoryList} from '@/services/ant-design-pro/goods';
import {Button, message} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {BetaSchemaForm, ProFormInstance} from '@ant-design/pro-form';
import MyUpload from '@/components/MyUpload';

const cloneTbale = () => {
  const formRef = useRef<ProFormInstance> ();
  const [editDialg, setEditDialg] = useState ( false );
  const [category, setCategory] = useSetState<API.Category> ( {} );
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '维语名称',
      dataIndex: 'nameUg',
      search: false,
    },
    {
      title: '图片',
      dataIndex: 'image',
      valueType: 'image',
      search: false,
    },
    {
      title: '排水',
      dataIndex: 'sort',
    },
    {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_: any, row: API.Category, index: number, action: any) => [
        <a
          key="link"
          onClick={(a) => {
            console.log ( row );
            setCategory ( row );
            editDialogInfo ( row, index );
          }}
        >
          编辑
        </a>,
      ],
    },
  ];

  const columnDialog = [
    {
      title: '基本信息',
      valueType: 'group',
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
          hideInForm: true,
        },
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          width: 'md',
        },
        {
          title: '维语名称',
          dataIndex: 'nameUg',
          key: 'nameUg',
          width: 'md',
        },
        {
          title: '排水',
          dataIndex: 'sort',
          width: 'md',
          valueType: 'digit',
        },
        {
          title: '图标',
          dataIndex: 'imageId',
          width: 'md',
          key: 'imageId',
          renderFormItem: (e: any, e1: any, e2: any) => {
            console.log ( 'MyUploadrenderFormItem', e, e1, e2 );
            return (
              <MyUpload
                url={category?.image}
                value={category?.id}
                onChange={myUploadLestner}
                type={0}
              />
            );
          },
        },
      ],
    },
  ];
  const [columnDialogs, setColumnDialogs] = useState ( columnDialog );
  const myUploadLestner = (item: API.Picture) => {
    //  category.imageId=item.id;
    console.log ( 'myUploadLestner1', item );
    console.log ( 'myUploadLestner2', category );
    formRef?.current?.setFieldsValue ( {imageId: item.id} );
    //  let a = {...category,imageId: item.id}
    // setCategory (a);
    console.log ( 'myUploadLestner3', category );
  };
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByPageList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByPageCategoryList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
    fetchByPageList ();
  } );

  function hideEditDialg() {
    setCategory ( {...category, id: undefined} );
    formRef.current?.resetFields ();
    setEditDialg ( false );
  }

  function openEditDialg() {
    setCategory ( {...category, id: undefined} );
    formRef.current?.resetFields ();
    setEditDialg ( true );
  }

  function editDialogInfo(row: API.Category, index: number) {
    setCategory ( row );
    console.log ( 'editDialogInfo', category );
    formRef?.current?.setFieldsValue ( row );

    setEditDialg ( true );
  }

  return (
    <div>
      <BetaSchemaForm<API.Category>
        formRef={formRef}
        initialValues={category}
        onCancel={() => setEditDialg ( false )}
        onVisibleChange={setEditDialg}
        title="产品分类"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialogs}
        // @ts-ignore
        onFinish={async (values) => {
          // @ts-ignore
          //   values.id=category.id;
          //setCategory({...category,...values})

          values = Object.assign ( category, values );
          console.log ( category, values );
          return new Promise<Boolean> ( (resolve, reject) => {
            editCategory ( values )
              .then ( () => {
                message.success ( '操作成功' );
                setEditDialg ( false );
                refresh ();
                resolve ( true );
              } )
              .catch ( () => {
                message.success ( '操作失败' );
                reject ( false );
              } );
          } );
        }}
      />
      <ProTable
        search={false}
        onDataSourceChange={(d) => {
          console.log ( 'onDataSourceChange', d );
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log ( 'onDataSourceChange', d );
        }}
        toolBarRender={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields ();
              openEditDialg ();
            }}
            key="button"
            icon={<PlusOutlined/>}
            type="primary"
          >
            新建
          </Button>,
        ]}
        dataSource={dataList?.data?.list}
        loading={loading}
        pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
          setPagination ( data1 );

          fetchByPageList ( {...data1} );
        } )}
        search={{
          defaultCollapsed: false,
          labelWidth: 'auto',
        }}
        cardBordered={true}
        columns={columns}
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
